<template>
  <div class="container">
    <!-- 卡片区域 -->
    <el-card class="box-card">
      <!-- 搜索功能 -->
      <div class="container-search">
        <span class="texts">目录名称</span>
        <el-input class="tableinp" v-model="searchText"></el-input>
        <!-- 状态-->
        <span class="texts">状态</span>
        <el-select class="selectinp" v-model="state" placeholder="请选择">
          <el-option label="启用" value="1"> </el-option>
          <el-option label="禁用" value="0"> </el-option>
        </el-select>
        <!-- 状态-->
        <el-button size="small" class="clear" @click="clear">清除</el-button>
        <el-button size="small" type="primary" @click="searchDirectorys"
          >搜索</el-button
        >
        <el-button
          size="small"
          class="selectIncrease"
          type="success"
          icon="el-icon-edit"
          @click="dialogVisible = true"
          >新增目录</el-button
        >
      </div>

      <!-- 搜索功能 -->

      <!-- 提示文案 -->
      <el-alert
        :title="'数据一共' + total + '条'"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 提示文案 -->
      <!-- 表单 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="180">
        </el-table-column>
        <el-table-column prop="directoryName" label="目录名称">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="160">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="160">
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量" width="160">
        </el-table-column>
        <el-table-column prop="state" label="状态">
        </el-table-column>
        <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            class="textBtn"
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small"
          >
            禁用
          </el-button>
          <el-button
            class="textBtn"
            @click.native.prevent="cdeleteRow(scope.$index, tableData)"
            type="text"
            size="small"
          >
            修改
          </el-button>
          <el-button
            class="textBtn"
            type="text"
            size="small"
            @click="deleteBtn(scope.row.id)"
          >
            删除
          </el-button>
        </template>
        </el-table-column>
      </el-table>
      <!-- 表单 -->

      <!-- 分页
       size-change: 当page-size改变时会触发这个钩子
       current-change: 当切换页面时会触发的钩子
      -->
      <el-pagination
        class="Pagination"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="pagesize"
        layout=" prev, pager, next,sizes, jumper"
        :page-sizes="[2, 3, 5, 10]"
        :total="total"
      >
        >
      </el-pagination>
      <!-- 分页-->
      <!-- Dialog 对话框-->
      <el-dialog
        title="新增目录"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <div class="subjectText">
          <label class="subjectTxt">所属学科</label>
          <el-select
            :data="selectData"
            class="subjectSelect"
            v-model="subjectName"
            placeholder="请选择"
          >
            <el-option
              v-for="item in selectData"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>

        <div class="tableontents">
          <label class="tableontentsText">目录名称</label>
          <el-input
            class="tableontentIpt"
            v-model="directoryName"
            placeholder="请输入内容"
          ></el-input>
          <span slot="footer" class="dialog-footer">
            <div class="options">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addBtn">确 定</el-button>
            </div>
          </span>
        </div>
      </el-dialog>
      <!-- Dialog 对话框-->
    </el-card>
    <!-- 卡片区域 -->
  </div>
</template>

<script>
import { add, remove, list } from '@/api/hmmm/directorys'
import { list as subjectList } from '@/api/hmmm/subjects'
import dayjs from 'dayjs'
export default {
  name: 'directorys',
  data () {
    return {
      tableData: [], // 列表
      options: [], // 卡片内所属学科数据
      value: null, // 状态
      dialogVisible: false, // 新增目录
      searchText: null, // 目录名称
      state: null,
      page: 1, // 每一页
      pagesize: 10, // 页面尺寸
      total: null, // 总数
      selectData: [], // 简单列表
      input: null,
      dialogBtn: null, // 删除提示
      subjectName: null, // 学科名
      directoryName: null
    }
  },

  created () {
    // 列表
    this.getTableData()
    // 简单列表
    this.getselectData()
  },
  methods: {
    // 获取列表
    async getTableData (params) {
      try {
        const { data } = await list(params)
        this.tableData = data.items
        this.tableData.forEach(it => {
          it.addDate = dayjs(it.addDate).format('YYYY-MM-DD hh:mm:ss')
        })
        console.log(this.tableData)
        this.total = data.counts
      } catch (err) {
        console.log('获取失败')
      }
    },
    // 处理 分页 页码大小的事件
    handleSizeChange (val) {
      this.pagesize = val
      this.getTableData({
        pagesize: this.pagesize,
        page: this.page
      })
    },
    // 处理 分页 当前页变动时候触发的事件
    handleCurrentChange (val) {
      this.page = val
      this.getTableData({
        page: this.page,
        pagesize: this.pagesize
      })
    },
    // 获取所属列表
    async getselectData (params) {
      try {
        const { data } = await subjectList(params)
        this.selectData = data.items
        // console.log(this.selectData)
      } catch (err) {
        console.log('获取失败')
      }
    },
    // 搜索目录
    searchDirectorys () {
      this.getTableData({
        directoryName: this.searchText
      })
    },
    // 清除 目录名称 和 状态
    clear () {
      this.searchText = null
      this.state = null
    },
    // 点击添加目录事件
    async addBtn () {
      this.dialogVisible = false
      try {
        await add({
          subjectID: this.subjectName,
          directoryName: this.directoryName
        })
        this.getTableData()
        this.$message.success('添加目录成功')
      } catch (err) {
        this.$message.error('添加目录失败')
      }
      this.subjectName = null
      this.directoryName = null
    },
    // 点击删除目录
    async deleteBtn (id) {
      const confirm = await this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(e => e)
      if (confirm === 'cancel') {
        return this.$message.info('已取消删除')
      } else {
        try {
          await remove({
            id
          })
          this.$message.success('删除成功')
          this.getTableData()
        } catch (err) {
          this.$message.success('已删除')
        }
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 5px;
}
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 15%;
}
.status {
  height: 30px;
}
.tableinp {
  margin: 0 15px;
}
.selectinp {
  margin: 0 15px;
}
.selectIncrease {
  float: right;
}
.el-alert {
  margin: 20px 0;
}
.Pagination {
  float: right;
  padding: 30px 0;
}

.subjectTxt {
  height: 32px;
  margin-left: 15px;
}
.subjectSelect {
  width: 75%;
  margin: 0 15px;
}

.tableontents {
  margin: 30px 0 0 0;
}
.tableontentsText {
  height: 32px;
  margin-left: 15px;
}
.tableontentIpt {
  width: 75%;
  margin: 0 15px;
}
.options {
  margin: 50px 0 0 240px;
}
.texts {
  font-size: 14px;
  font-weight: 900;
}
.textBtn {
  font-size: 15px;
}
</style>
